<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>管理员编辑</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="renderer" content="webkit">

        <link rel="shortcut icon" href="../../../extends/img/favicon.ico" />
        <!-- Loading Bootstrap -->
        <link href="../../../extends/css/main.css" rel="stylesheet">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
        <!--[if lt IE 9]>
        <script src="../../../assets/html5shiv.min.js"></script>
        <script src="../../../assets/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript">
            var require = {
                "config": {
                    "site": {
                        "name": "FastAdmin",
                        "cdnurl": "../../../",
                        "version": "1.0.0",
                        "timezone": "Asia/Shanghai",
                        "languages": {
                            "backend": "zh-cn",
                            "frontend": "zh-cn"
                        }
                    },
                    "upload": {
                        "cdnurl": "./",
                        "uploadurl": "data/upload.json",
                        "bucket": "yourbucketname",
                        "maxsize": "10mb",
                        "mimetype": "*",
                        "multipart": {
                            "policy": "eyJidWNrZXQiOiJ5b3VyYnVja2V0bmFtZSIsInNhdmUta2V5IjoiXC91cGxvYWRzXC97eWVhcn17bW9ufXtkYXl9XC97ZmlsZW1kNX17LnN1ZmZpeH0iLCJleHBpcmF0aW9uIjoxNTAwNTI2NTczLCJub3RpZnktdXJsIjoiaHR0cDpcL1wvd3d3LnlvdXJzaXRlLmNvbVwvdXB5dW5cL25vdGlmeSJ9",
                            "signature": "043eaf09c0319b1a9a11d06511bfdc4e",
                            "bucket": "yourbucketname",
                            "save-key": "/uploads/{year}{mon}{day}/{filemd5}{.suffix}",
                            "expiration": 1500526573,
                            "notify-url": "http://www.yoursite.com/upyun/notify"
                        },
                        "multiple": false
                    },
                    "modulename": "admin",
                    "controllername": "userAvatar",
                    "actionname": "init",
                    "jsname": "main/js/admin/userAvatar",
                    "moduleurl": "./",
                    "language": "zh-cn",
                    "referer": null
                }
            };
        </script>
    </head>

    <body class="inside-header inside-aside is-dialog">
        <div id="main" role="main">
            <div class="tab-content tab-addtabs">
                <div id="content">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="content">
	                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
	                                <h5 class="current-picture">当前头像</h5>
	                                <div id="crop-avatar" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	                                    <div class="avatar-view">
	                                        <img class="img-responsive avatar" src="/extends/img/avatar.png" alt="用户头像">
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
		                          <div id="avatar-modal">
		                                <form id="edit-form" class="form-horizontal avatar-form" role="form" action="/user/upload/avatar" 
		                                	enctype="multipart/form-data" method="POST">
			                              <div class="modal-content">
			                                     <div class="modal-body">
			                                         <div class="avatar-body">
		                                             	<div class="avatar-upload">
						                        			<div id="errtips" class="hide"></div>
						                        			<input type="hidden" name="id" />
			                                                 <input class="avatar-src" name="avatar_src" type="hidden">
			                                                 <input class="avatar-data" name="avatar_data" type="hidden">
			                                                 <label class="btn btn-primary bg-teal-300" for="avatarInput">本地上传</label>
			                                                 <input type="file" name="avatar_file" id="avatarInput"
			                                                        class="avatar-input" accept=".jpg,.jpeg,.gif,.png" title="请选择要修改的头像">
			                                                 <div class="picture-format">
			                                                     仅支持JPG、GIF或PNG格式的图片文件，且文件大小不能超过2M。
			                                                 </div>
			                                             </div>
			                                             <div class="row">
			                                                 <div class="col-xs-7 col-sm-7 col-md-9 col-lg-9">
			                                                     <div class="avatar-wrapper"></div>
			                                                 </div>
			                                                 <div class="col-xs-5 col-sm-5 col-md-3 col-lg-3">
			                                                     <div class="avatar-preview preview-lg">
			                                                         <img class="avatar" src="/extends/img/avatar.png">
			                                                     </div>
			                                                     <div class="avatar-preview preview-md">
			                                                         <img class="avatar" src="/extends/img/avatar.png">
			                                                     </div>
			                                                     <div class="avatar-preview preview-sm">
			                                                         <img class="avatar" src="/extends/img/avatar.png">
			                                                     </div>
			                                                 </div>
			                                             </div>
			                                             <div class="row avatar-btns">
			                                                 <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 btn-group">
			                                                     <div class="btn-group col-xs-2 col-sm-2 col-md-2 col-lg-2 no-padding control-label">
			                                                         <button type="button"
			                                                                 class="btn bg-teal-400 form-control"
			                                                                 data-method="setDragMode"
			                                                                 data-option="move" title="Move">
			                                                             <span class="icon-move"></span>移动
			                                                         </button>
			                                                     </div>
			
			                                                     <div class="btn-group col-xs-2 col-sm-2 col-md-2 col-lg-2 no-padding control-label">
			                                                         <button type="button"
			                                                                 class="btn bg-teal-400 form-control"
			                                                                 data-method="zoom" data-option="0.1"
			                                                                 title="Zoom In">
			                                                             <span class="icon-zoomin3"></span>放大
			                                                         </button>
			                                                     </div>
			
			                                                     <div class="btn-group col-xs-2 col-sm-2 col-md-2 col-lg-2 no-padding control-label">
			                                                         <button type="button"
			                                                                 class="btn bg-teal-400 form-control"
			                                                                 data-method="zoom" data-option="-0.1"
			                                                                 title="Zoom Out">
			                                                             <span class="icon-zoomout3"></span>缩小
			                                                         </button>
			                                                     </div>
			
			                                                     <div class="btn-group col-xs-2 col-sm-2 col-md-2 col-lg-2 no-padding control-label">
			                                                         <button type="button"
			                                                                 class="btn btn bg-teal-400 form-control"
			                                                                 data-method="rotate"
			                                                                 data-option="-45" title="Rotate Left">
			                                                             <span class="icon-rotate-ccw3"></span>旋转
			                                                         </button>
			                                                     </div>
			
			                                                     <div class="btn-group col-xs-2 col-sm-2 col-md-2 col-lg-2 no-padding control-label">
			                                                         <button type="button"
			                                                                 class="btn btn bg-teal-400 form-control"
			                                                                 data-method="rotate"
			                                                                 data-option="45" title="Rotate Right">
			                                                             <span class="icon-rotate-cw3"></span>旋转
			                                                         </button>
			                                                     </div>
			                                                 </div>
			                                             </div>
			                                         </div>
			                                     </div>
			                                 </div>
			                                   <div class="form-group layer-footer">
			                                       <label class="control-label col-xs-12 col-sm-2"></label>
			                                       <div class="col-xs-12 col-sm-8">
			                                           <button type="submit" class="btn btn-success btn-embossed">保存</button>
			                                       </div>
			                                   </div>
			                                </form>
		                             </div>
		                        </div>
                                <style>
                                	.avatar-wrapper{
                                		height: 300px;
                                	}
                                	h5.current-picture {
									    margin: 0;
									    text-align:center;
									    margin-bottom: 10px;
									}
									.panel-white > .panel-heading {
									    border-bottom-width: 2px;
									}
									.modal-content {
									    border: 1px solid #e5e5e5;
									    box-shadow: none;
									}
									.avatar-view {
									    width: auto;
									    height: auto;
									    position: relative;
									}
									.avatar-btns {
									    margin-top: 20px;
									    margin-bottom: 0;
									}
									.avatar-btns .btn-group span, .avatar-btns .icon-floppy-disk {
									    margin-right: 8px;
									}
									.avatar-btns .btn-group .btn {
									    border-right: 1px solid #009688;
									    font-size: 15px;
									}
									.avatar-btns .btn-group:last-child .btn {
									    border-right: 0;
									    border-radius: 0 3px 3px 0;
									}
									.avatar-btns .btn-group:first-child .btn {
									    border-radius: 3px 0 0 3px;
									}
									.avatar-btns .btn-group {
									    margin-right: 0;
									}
									.btn-group .btn + .btn, .input-group-btn .btn + .btn, .btn-group .btn + .btn-group, .input-group-btn .btn + .btn-group, .btn-group .btn-group + .btn, .input-group-btn .btn-group + .btn, .btn-group .btn-group + .btn-group, .input-group-btn .btn-group + .btn-group {
									    margin-left: 0;
									}
									.avatar-upload .avatar-input {
									    display: none;
									}
									.avatar-upload .picture-format {
									    margin-top: 10px;
									    margin-left: 114px;
									    font-size: 12px;
									}
									.modal-header {
									    border-bottom-width: 2px;
									    padding: 10px;
									}
									.modal-header .close {
									    top: 30%;
									}
                                </style>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="../../../assets/requirejs/require.js" data-main="../../../extends/js/main.js"></script>
    </body>
</html>